<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>EaselJS Example: Using localToGlobal</title>

	<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />

	<!-- Note: All core EaselJS classes are listed here: -->
	<script type="text/javascript" src="../src/createjs/events/Event.js"></script>
	<script type="text/javascript" src="../src/createjs/events/EventDispatcher.js"></script>
	<script type="text/javascript" src="../src/createjs/utils/IndexOf.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/Ticker.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Point.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Rectangle.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shadow.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/SpriteSheet.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Bitmap.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Sprite.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapAnimation.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapText.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Text.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DOMElement.js"></script>
	<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
	<script type="text/javascript" src="../src/easeljs/filters/Filter.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/ButtonHelper.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/Touch.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetUtils.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetBuilder.js"></script>

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

	<script>
	var canvas;
	var stage;
	var whee;		// Button to demonstrate position

	var bar1;		// visual of the blue bar
	var bar2;		// visual of the green bar
	var bar3;		// visual of the red bar

	var arm1;		// container of the blue arm to allow for children
	var arm2;		// container of the green arm to allow for children

	function init() {

		if (window.top != window) {
			document.getElementById("header").style.display = "none";
		}

		// get references to canvas and "whee" button:
		canvas = document.getElementById("testCanvas");
		whee = document.getElementById("whee");

		// create a new stage and point it at our canvas:
		stage = new createjs.Stage(canvas);

		// set up arms:

		// this is the shape that represents the end (red) arm:
		bar3 = new createjs.Shape();
		var g = bar3.graphics;
		g.beginFill("#8B2222");
		g.drawRect(-3,-3,6,130);
		bar3.regY = 20;
		bar3.y = 105;

		// unlike the other 2, bar3 does not require a matching arm element,
		// because there are no other children.

		// visible middle (green) bar
		bar2 = new createjs.Shape();
		g = bar2.graphics;
		g.beginFill("#228B22");
		g.drawRect(-5,-5,10,110);

		// arm container that holds the green bar, and the nested red bar:
		arm2 = new createjs.Container();
		arm2.addChild(bar2);
		arm2.addChild(bar3);
		arm2.regY = 20;
		arm2.y = 72;		//position in parent object

		// visible anchor (blue) bar:
		bar1 = new createjs.Shape();
		g = bar1.graphics;
		g.beginFill("#22228B");
		g.drawRect(-8,-8,16,80);

		// arm container that holds the blue bar, and the nested green bar:
		arm1 = new createjs.Container();
		arm1.addChild(bar1);
		arm1.addChild(arm2);

		// center arm1 on screen
		arm1.x = canvas.width/2;
		arm1.y = canvas.height/2;
		stage.addChild(arm1);

		// start the tick and point it at the window so we can do some work before updating the stage:
		createjs.Ticker.setInterval(20);		// in ms, so 50 fps
		createjs.Ticker.addEventListener("tick", tick);
	}

	function tick(event) {
		// update rotation for all arms:
		arm1.rotation += 1.9;
		arm2.rotation += -2.7;
		bar3.rotation += 4.4;

		// calculate the global (stage) position of the end of the red bar,
		// and move the HTML "whee" button to that position:
		var pt = bar3.localToGlobal(0, 130);
		whee.style.left = Math.round(pt.x+canvas.offsetLeft-10) + "px";
		whee.style.top = Math.round(pt.y+canvas.offsetTop-10) + "px";

		stage.update(event);
	}
	</script>
</head>
	
<body onload="init();">

	<header id="header" class="EaselJS">
	    <h1><span class="text-product">Easel<strong>JS</strong></span> Local To Global</h1>
	    <p>Using <strong>CoordTransform.localToGlobal()</strong> to position an HTML element relative to a <strong>DisplayObject</strong> nested in the display list.</p>
	</header>

	<div class="canvasHolder">
		<canvas id="testCanvas" width="960" height="400"></canvas>
		<input type="button" value="wheeeeee!" id="whee" style="position:absolute;"/>
	</div>
</body>
</html>
